import React from 'react';
import { BaseEditorProps } from './BaseEditor';
import { SelectColumn } from '@/components/editable-excel-table';
import styles from './Editor.module.less';

/**
 * 单选选择编辑器【比较特殊，因为选择完毕之后，就直接更新数据了，不需要change】
 */
export function SelectEditor<C extends SelectColumn>({ value, column, className, onClose }: BaseEditorProps<C>) {
    return (
        <select
            value={value || ''}
            onChange={(e) => {
                onClose?.({
                    type: 'leaveEditor',
                    value: e.target.value,
                });
            }}
            onClick={(e) => e.stopPropagation()}
            className={`${styles.editor} ${styles.selectEditor} ${className || ''}`}
            autoFocus
        >
            <option value="">请选择</option>
            {column.options?.map((option) => (
                <option key={option} value={option}>
                    {option}
                </option>
            ))}
        </select>
    );
}
